<template>
  <div style="width: 100%;background-color: #F1F3F4;height: 100vh;overflow: hidden" v-loading.fullscreen.lock="fullscreenLoading">
    <BusinessInstance ref="businessInstance" style="height: 50px" @success="workflowCallback" @saveBusiness="saveReimburseForm" :form-data="formData"/>
    <div style="height: 5px;background-color:#F1F3F4"></div>
    <el-row style="height: 50px;margin-left: 10%;background-color: white;width: 80%">
      <el-col :span="22" >

        <el-row>
          <el-col :span="3">
            <div style="text-align: center">
              <el-button @click="processDetail" type="text" :style="processStyle">流程信息</el-button>
            </div>
          </el-col>
          <el-col :span="3">
            <div style="text-align: center">
              <el-button @click="suggestDetail" type="text" :style="suggestStyle">意见列表</el-button>
            </div>
          </el-col>
          <el-col :span="3">
            <div style="text-align: center">
              <el-button @click="fileDetail" type="text" :style="fileStyle">附件列表</el-button>
            </div>
          </el-col>
          <el-col :span="3">
            <div style="text-align: center">
              <el-button @click="trackDetail" type="text" :style="traceStyle">流程跟踪</el-button>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <div style="height: 5px;background-color:#F1F3F4"></div>
    <el-row style="margin-left: 10%;background-color: white;width: 80%" v-if="nowDetail === 'process'">
      <el-col :span="24">
        <ReimburseProcessDetailTab  ref="reimburseProcessDetailTab" @success="processSuccessCallback" :form-data = "formData"/>
      </el-col>
    </el-row>
    <el-row style="margin-left: 10%;background-color: white;width: 80%" v-else-if="nowDetail === 'suggest'">
      <el-col :span="24" >
        <SuggestDetailTab  ref="suggestDetailTab"/>
      </el-col>
    </el-row>
    <el-row style="margin-left: 10%;background-color: white;width: 80%" v-else-if="nowDetail === 'file'">
      <el-col :span="24" >
        <FileDetailTab  ref="fileDetailTab"/>
      </el-col>
    </el-row>
    <el-row style="margin-left: 10%;background-color: white;width: 80%" v-else-if="nowDetail === 'track'">
      <el-col :span="24" >
        <TrackDetailTab  ref="trackDetailTab"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BusinessInstance from './BusinessInstance.vue'
import FileDetailTab from '../process/action/FileDetailTab.vue'
import ReimburseProcessDetailTab  from './ReimburseProcessDetailTab.vue'
import TrackDetailTab from '../process/action/TrackDetailTab.vue'
import SuggestDetailTab from '../process/action/SuggestDetailTab.vue'
export default {
  components:{
    BusinessInstance,
    FileDetailTab,
    ReimburseProcessDetailTab,
    TrackDetailTab,
    SuggestDetailTab
  },
  data() {
    return {
      fullscreenLoading:true,
      nowDetail:"process",
      processStyle:this.defaultTabStyle(),
      suggestStyle:this.defaultTabStyle(),
      fileStyle:this.defaultTabStyle(),
      traceStyle:this.defaultTabStyle(),
      formData:{},
      workflowDetail:{
        processInstanceId:"",
        auths:[],
        status:"",
        statusName:"",
        details:{},
        nodeFormConfigs:[],
        variableConfigs:{},
        actions:[]
      },
    }
  },
  created() {
    this.processDetail();
  },
  methods: {
    defaultTabStyle(){
      return {
        marginTop: '10px',
        color: 'black',
        fontSize: '16px'
      }
    },
    defaultColorSet(){
      this.processStyle.color = 'black';
      this.suggestStyle.color = 'black';
      this.fileStyle.color = 'black';
      this.traceStyle.color = 'black';
    },
    processDetail(){
      this.defaultColorSet();
      this.processStyle.color = 'red';
      this.nowDetail = 'process';
      this.processDetailTabShow();
    },
    suggestDetail(){
      this.defaultColorSet();
      this.suggestStyle.color = 'red';
      this.nowDetail = 'suggest'
      this.$nextTick(() => {
        if(this.$refs.suggestDetailTab){
          this.$refs.suggestDetailTab.showProcess(this.workflowDetail);
        }
      });
    },
    fileDetail(){
      this.defaultColorSet();
      this.fileStyle.color = 'red';
      this.nowDetail = 'file';
    },
    trackDetail(){
      this.defaultColorSet();
      this.traceStyle.color = 'red';
      this.nowDetail = 'track';
      this.$nextTick(() => {
        if(this.$refs.trackDetailTab){
          this.$refs.trackDetailTab.showProcess(this.workflowDetail);
        }
      });
    },
    workflowCallback(row){
      this.workflowDetail = row;
      this.processDetailTabShow();
      this.fullscreenLoading = false;
    },
    async saveReimburseForm(refresh,callback){
      if(this.nowDetail !== 'process'){
        this.processDetail();
      }
      setTimeout(() => {
        let ret = this.$refs.reimburseProcessDetailTab.saveReimburseForm(refresh);
        callback(ret);
      },1000)
    },
    processDetailTabShow(){
      this.$nextTick(() => {
        if(this.$refs.reimburseProcessDetailTab){
          this.$refs.reimburseProcessDetailTab.showProcess(this.workflowDetail);
        }
      });
    },
    processSuccessCallback(row){
      this.formData = row;
    }
  },

}
</script>


<style src="../css/index.scss" lang="scss"></style>
<style lang="scss" scoped>
.search-item{
  float: left;
  margin: 0 20px 20px 0;
  span{
    color: #606266;
    font-size: 14px;
    margin-right: 0px;
  }
}
.workProcessClass{
  height: 500px;
  overflow: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: white;
}
</style>
